import React,{Component} from 'react'
import { Checkbox,InputNumber,Menu, Dropdown, Icon,Modal } from 'antd';
import PayProcess from './PayProcess';
import * as api from '../../api/cart'
import { number } from 'prop-types';
export default class CheckBag extends Component{
    constructor(props){
        super(props)
        this.state={
            allSel:false,
            list:[],
            sumNum:0,
            sumMoney:0,
            sty1:{display:'flex'},
            sty2:{display:'block'},
            visible:false,
            msg:''
        }
    }
    //单选多选
    singleSel(i){
        let arr = this.state.list
        arr[i].checked = true
        let isAll = false
        let obj = arr.filter(v=>v.checked == false)
        if(obj.length==0){
            isAll = true
        }else{
            isAll = false
        }
        this.setState({
            list:arr,
            allSel:isAll
        })
        this.sum()
    }
    allSel(){
        let isAll = !this.state.allSel
        let arr = this.state.list
        console.log(isAll)
        arr.map(v=>v.checked = isAll)
        this.setState({
            list:arr,
            allSel:isAll
        })
        this.sum()
    }

    //数量增删
    add(id,index){
        console.log(id)
        api.addCart({product:id}).then(data=>{
            let arr = this.state.list
            arr[index].quantity += 1
            this.setState({list:arr})
            this.sum()
        })
    }
    sub(id,index){
        let arr = this.state.list
        if(arr[index].quantity <=1){
            console.log('购物车商品不能为空')
            api.deleteCart(id).then(data=>{
                console.log(data)
                arr.splice(index,1)
                this.setState({list:arr})
                this.sum()
            })
        }else{
            arr[index].quantity -= 1
            this.setState({list:arr})
        }
    }
    
    sum(){
        let money = 0
        let num = 0
        let arr = this.state.list
        console.log(arr)
        if(arr.length == 0){
            console.log('购物车为空')
            this.refs.tab.style.display = 'none'
            this.setState({
                sty1:{display:'none'},
                sty2:{display:'block'}
            })
        }else{
            arr.map(v=>{
                if(v.checked == true){
                    num += v.quantity
                    money += v.quantity*v.product.price
                }
            })
            console.log(money,num)
            this.setState({
                sumNum :num,
                sumMoney:money
            })
        }
        
    }
    showModal = () => {
        let arr = this.state.list
        let obj = arr.filter(v=>v.checked == true)
        if(obj.length !== 0){
            this.setState({
                msg:'请确认是否跳转到订单提交页'
            })
        }else{
            this.setState({
                msg:'您还没有选中商品，请选择心仪的商品'
            })
            
        }
        this.setState({
          visible: true,
        });
    };
    handleOk = e => {
      let arr = this.state.list
        let obj = arr.filter(v=>v.checked == true)
        let nullSel = arr.filter(v=>v.checked == false)
        if(obj.length !== 0){
            localStorage.setItem('product',JSON.stringify(obj))
            obj.map(v=>{
                api.deleteCart(v._id).then(data=>{
                    console.log(data)
                })
            })
            this.setState({
                list:nullSel
            })
            this.props.history.push('./orderConfirm')
        }else{
            
        }
        this.setState({
            visible: false,
        });
    };

    handleCancel = e => {
      console.log(e);
      this.setState({
        visible: false,
      });
    };
    componentDidMount(){
          api.productCart().then((data)=>{
            let arr = data.data
            if(arr.length == 0){
                console.log('购物车为空')
                this.refs.tab.style.display = 'none'
                this.setState({
                    sty1:{display:'none'},
                    sty2:{display:'block'}
                })
            }else{
                console.log('购物车不为空')
                arr.map((v)=>{
                    v.checked = false
                })
                this.setState({
                    list:arr,
                    sty1:{display:'flex'},
                    sty2:{display:'none'}
                })
            }
        })
    }
    render(){
        return(
            <div style={{borderTop:'5px solid #000'}}>
            <PayProcess style={this.state.sty1} name="0"/>
            <div className="bag-title">
                <h2>购物袋</h2>
                <h3>优惠：单笔消费，满699元免邮</h3>
                <div style={this.state.sty2} className="whiteSpace"><Icon type="tablet" />购物车还是空的哦，快去挑选心仪的衣服吧~</div>
                <div ref="tab">
                <table className="bag-content">
                    <thead>
                        <tr>
                            <th>商品名称</th>
                            <th>颜色/尺码</th>
                            <th>单价</th>
                            <th>数量</th>
                            <th>小计</th>
                        </tr>
                    </thead>
                    <tbody>
                        {
                            this.state.list.map((v,i)=>{
                                return(
                                    <tr style={this.state.sty1} key={i}>
                                        <td>
                                            <Checkbox onChange={()=>this.singleSel(i)} checked={v.checked} data-id={i} ref="singleSel"></Checkbox>
                            
                                        <img style={{width:'100px',height:'180px'}} src={v.product.coverImg}/>
                                        <ul>
                                           <li>{v.product.name}</li>
                                            <li>TRENDIANO</li>
                                            <li>货号：3ZC3017910991</li> 
                                        </ul>

                                        </td>
                                        <td>
                                        <Dropdown trigger={['click']}>
                                        <a className="ant-dropdown-link" href="#">
                                            灰粉条/M<Icon type="caret-down" />
                                        </a>
                                        </Dropdown>
                                        </td>
                                        <td><p ref="singlePrice">￥{v.product.price}</p></td>
                                        <td>
                                            <div class="select-num">
                                                <button data-id={i} onClick={()=>this.add(v.product._id,i)}>+</button>
                                                <input ref="ipt" data-id={i} value={v.quantity} type="text" ref="num" />
                                                <button data-id={i} onClick={()=>this.sub(v._id,i)}>-</button>
                                            </div>
                                        </td>
                                        <td><p ref="singleSum">￥{v.product.price*v.quantity}</p></td>
                                    </tr>
                                )
                            })
                        }
                    </tbody>
                </table>
                <div style={this.state.sty1} className="checkbox">
                <Checkbox onChange={()=>this.allSel()} checked={this.state.allSel}>多选</Checkbox>
                <p>删除已选</p>
                </div>
                <div className="pay-monery">
                    <div>
                    <p>已选:<span>{this.state.sumNum}</span>件</p>
                     <p>总计金额(不含运费)：￥<span ref="sum">{this.state.sumMoney}</span></p>
                     <button onClick={this.showModal.bind(this)}>马上结算</button>  
                    </div>   
                </div>
                </div>
            </div>
                <Modal
                  title="温馨提示"
                  visible={this.state.visible}
                  onOk={this.handleOk}
                  onCancel={this.handleCancel}
                >
                  <p>{this.state.msg}</p>
                </Modal>
            </div>
        )
    }
    
}
